<script lang="ts" setup>
import { computed, onMounted, ref, watch } from 'vue'
import { storeToRefs } from 'pinia'
import { safeAreaInsets } from '@/utils/systemInfo'
import { useBookshelfStore } from '@/store/bookshelf'

defineOptions({
  name: 'Library',
})

definePage({
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '我的书架',
  },
})

// ==================== 状态管理 ====================
const bookshelfStore = useBookshelfStore()

// 从 store 中解构响应式数据
const {
  bookshelves,
  favorites,
  currentBookshelfId,
  bookshelvesLoading,
  favoritesLoading,
  bookshelvesError,
  favoritesError,
  createLoading,
  updateLoading,
  deleteLoading,
  currentBookshelf,
  defaultBookshelf,
  customBookshelves,
  currentBookshelfCount,
} = storeToRefs(bookshelfStore)

// 从 store 中解构方法
const {
  fetchBookshelves,
  fetchFavorites,
  createBookshelfAction,
  updateBookshelfAction,
  deleteBookshelfAction,
  selectBookshelf,
  moveFavoritesAction,
} = bookshelfStore

// 页面本地状态
const showBookshelfDropdown = ref(false)
const showCreateBookshelfModal = ref(false) // 创建书架弹窗显示状态
const newBookshelfName = ref('') // 新书架名称
const newBookshelfDescription = ref('') // 新书架描述
const lastRefreshTime = ref(0) // 记录上次刷新时间
const REFRESH_INTERVAL = 3000 // 3秒内不重复刷新
const isInitialLoad = ref(true) // 是否为初始加载
const showLoadingSpinner = ref(false) // 控制是否显示加载动画

// ==================== 生命周期 ====================
onMounted(async () => {
  await loadLibraryData()
})

// 页面显示时智能刷新数据（避免闪烁）
onShow(async () => {
  const currentTime = Date.now()
  const timeSinceLastRefresh = currentTime - lastRefreshTime.value

  console.log('Library页面显示，距离上次刷新时间:', timeSinceLastRefresh + 'ms')

  // 如果距离上次刷新超过设定间隔，则刷新数据
  if (timeSinceLastRefresh > REFRESH_INTERVAL || timeSinceLastRefresh < 0) {
    console.log('Library页面：需要刷新数据')
    await loadLibraryData()
    lastRefreshTime.value = currentTime
  } else {
    console.log('Library页面：距离上次刷新时间较短，跳过刷新避免闪烁')
  }
})

// 监听书架选择变化，自动加载对应的收藏
watch(currentBookshelfId, async (newId) => {
  if (newId) {
    await loadFavorites(newId)
  }
})

// ==================== 数据加载 ====================

// 加载页面数据
async function loadLibraryData() {
  try {
    console.log('Library页面：开始加载书架和收藏数据', { isInitialLoad: isInitialLoad.value })

    // 只有初始加载时才显示加载动画
    if (isInitialLoad.value) {
      showLoadingSpinner.value = true
    }

    // 强制刷新书架数据
    await fetchBookshelves({}, true)

    // 如果有当前选中的书架，强制刷新对应的收藏数据
    if (currentBookshelfId.value) {
      console.log('Library页面：刷新当前书架的收藏数据，书架ID:', currentBookshelfId.value)
      await loadFavorites(currentBookshelfId.value)
    }

    // 更新刷新时间戳和状态
    lastRefreshTime.value = Date.now()
    isInitialLoad.value = false
    showLoadingSpinner.value = false
    console.log('Library页面：数据加载完成，更新时间戳')
  }
  catch (error) {
    console.error('加载书架数据失败:', error)
    showLoadingSpinner.value = false
    uni.showToast({
      title: '加载失败，请重试',
      icon: 'error',
    })
  }
}

// 加载收藏数据
async function loadFavorites(bookshelfId?: number) {
  try {
    await fetchFavorites({
      bookshelfId,
    }, true)
  }
  catch (error) {
    console.error('加载收藏数据失败:', error)
    uni.showToast({
      title: '加载收藏失败，请重试',
      icon: 'error',
    })
  }
}


// ==================== 书架管理方法 ====================

// 切换书架下拉菜单
function toggleBookshelfDropdown() {
  showBookshelfDropdown.value = !showBookshelfDropdown.value
}

// 选择书架
function selectBookshelfAction(bookshelf: any) {
  selectBookshelf(bookshelf.id)
  showBookshelfDropdown.value = false
}

// 添加新书架
function addBookshelf() {
  showCreateBookshelfModal.value = true
}

// 确认创建书架
async function confirmCreateBookshelf() {
  if (!newBookshelfName.value.trim()) {
    uni.showToast({
      title: '请输入书架名称',
      icon: 'none',
    })
    return
  }

  const requestData = {
    name: newBookshelfName.value.trim(),
    description: newBookshelfDescription.value.trim(),
    sortOrder: bookshelves.value.length,
  }

  try {
    console.log('Library页面：创建新书架，数据:', requestData)
    await createBookshelfAction(requestData)

    // 关闭创建书架弹窗
    showCreateBookshelfModal.value = false
    newBookshelfName.value = ''
    newBookshelfDescription.value = ''

    // 立即刷新书架数据
    console.log('Library页面：书架创建成功，刷新书架列表')
    await fetchBookshelves({}, true)

    uni.showToast({
      title: '书架创建成功',
      icon: 'success',
    })
  } catch (error: any) {
    console.error('创建书架失败:', error)

    // 更详细的错误处理
    let errorMessage = '创建书架失败，请重试'

    if (error.statusCode === 500) {
      errorMessage = '服务器内部错误，可能是数据库问题，请稍后重试'
    } else if (error.statusCode === 401) {
      errorMessage = '登录已过期，请重新登录'
    } else if (error.message) {
      errorMessage = error.message
    }

    uni.showToast({
      title: errorMessage,
      icon: 'none',
      duration: 3000
    })
  }
}

// 取消创建书架
function cancelCreateBookshelf() {
  showCreateBookshelfModal.value = false
  newBookshelfName.value = ''
  newBookshelfDescription.value = ''
}

// 编辑书架
function editBookshelf(bookshelf: any) {
  if (bookshelf.isDefault) {
    uni.showToast({
      title: '默认书架不能编辑',
      icon: 'none',
    })
    return
  }

  uni.showModal({
    title: '编辑书架',
    editable: true,
    content: bookshelf.name,
    placeholderText: '请输入书架名称',
    success: async (res) => {
      if (res.confirm && res.content) {
        try {
          await updateBookshelfAction(bookshelf.id, {
            name: res.content.trim(),
          })

          uni.showToast({
            title: '书架修改成功',
            icon: 'success',
          })
        } catch (error) {
          console.error('修改书架失败:', error)
        }
      }
    },
  })
}

// 删除书架
function deleteBookshelfActionWrapper(bookshelf: any, event: any) {
  event.stopPropagation() // 阻止事件冒泡

  if (bookshelf.isDefault) {
    uni.showToast({
      title: '默认书架不能删除',
      icon: 'none',
    })
    return
  }

  uni.showModal({
    title: '删除书架',
    content: `确定要删除书架"${bookshelf.name}"吗？书架中的书籍将移至默认书架。`,
    success: async (res) => {
      if (res.confirm) {
        try {
          await deleteBookshelfAction(bookshelf.id)

          uni.showToast({
            title: '书架删除成功',
            icon: 'success',
          })
        } catch (error) {
          console.error('删除书架失败:', error)
        }
      }
    },
  })
}

// 点击其他地方关闭下拉菜单
function handleClickOutside() {
  showBookshelfDropdown.value = false
}

// ==================== 书籍操作方法 ====================

// 获取当前书架的书籍
const currentBooks = computed(() => {
  return favorites.value
})

// 跳转到搜索页
function goToSearch() {
  uni.navigateTo({
    url: '/pages/search/index',
  })
}

// 跳转到导入页
function goToImport() {
  uni.navigateTo({
    url: '/pages/import-detail/index',
  })
}

// 点击小说
function handleNovelClick(book: any) {
  uni.navigateTo({
    url: `/pages/novel-detail/index?id=${book.novelId}`,
  })
}

// 继续阅读
function continueReading(book: any) {
  uni.navigateTo({
    url: `/pages/novel-detail/index?id=${book.novelId}&continue=true`,
  })
}

// 格式化进度文本
function formatProgressText(book: any) {
  if (!book.novel?.totalChapters || !book.readingHistory?.chapterId) {
    return '暂无阅读进度'
  }

  const total = book.novel.totalChapters
  const current = book.readingHistory.chapterId
  const remaining = total - current

  return `已读 ${current}/${total}章 · 还剩 ${remaining} 章`
}

// 格式化阅读时间
function formatReadTime(book: any) {
  if (!book.readingHistory?.lastReadAt) {
    return '未开始阅读'
  }

  const lastRead = new Date(book.readingHistory.lastReadAt)
  const now = new Date()
  const diffMs = now.getTime() - lastRead.getTime()
  const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24))

  if (diffDays === 0) {
    const diffHours = Math.floor(diffMs / (1000 * 60 * 60))
    if (diffHours === 0) {
      const diffMinutes = Math.floor(diffMs / (1000 * 60))
      return `${diffMinutes}分钟前`
    }
    return `${diffHours}小时前`
  } else if (diffDays === 1) {
    return '昨天'
  } else if (diffDays < 7) {
    return `${diffDays}天前`
  } else if (diffDays < 30) {
    return `${Math.floor(diffDays / 7)}周前`
  } else {
    return `${Math.floor(diffDays / 30)}个月前`
  }
}
</script>

<template>
  <view class="library-page bg-bg-dark" :style="{ paddingTop: `${safeAreaInsets?.top}px` }" @click="handleClickOutside">
    <!-- 顶部标题栏 -->
    <view class="library-header">
      <!-- 书架选择器 -->
      <view class="bookshelf-selector" @click.stop>
        <view class="selector-trigger" @click="toggleBookshelfDropdown">
          <i class="fas fa-book text-32rpx text-primary" />
          <text class="bookshelf-name">{{ currentBookshelf?.name || '我的书架' }}</text>
          <i class="fas fa-chevron-down text-24rpx text-text-muted" :class="{ 'rotate-180': showBookshelfDropdown }" />
        </view>

        <!-- 书架下拉菜单 -->
        <view v-if="showBookshelfDropdown" class="bookshelf-dropdown">
          <view
            v-for="bookshelf in bookshelves"
            :key="bookshelf.id"
            class="dropdown-item"
            @click.stop="selectBookshelfAction(bookshelf)"
          >
            <text class="dropdown-text">{{ bookshelf.name }}</text>
            <text class="dropdown-count">({{ bookshelf.bookCount || 0 }})</text>
            <view class="dropdown-actions" @click.stop>
              <view v-if="!bookshelf.isDefault" class="action-btn edit-btn" @click="editBookshelf(bookshelf)">
                <i class="fas fa-edit" />
              </view>
              <view v-if="!bookshelf.isDefault" class="action-btn delete-btn" @click="deleteBookshelfActionWrapper(bookshelf, $event)">
                <i class="fas fa-trash" />
              </view>
            </view>
          </view>
          <view class="dropdown-divider" />
          <view class="dropdown-item add-item" @click="addBookshelf">
            <i class="fas fa-plus" />
            <text class="dropdown-text">新建书架</text>
          </view>
        </view>
      </view>

      <!-- 右侧操作区 -->
      <view class="header-right">
        <i class="fas fa-search text-32rpx text-text-muted" @click="goToSearch" />
        <i class="fas fa-cog text-32rpx text-text-muted" />
      </view>
    </view>

    <!-- 主要内容区域 -->
    <view class="page-content">
      <!-- 错误状态 -->
      <view v-if="bookshelvesError || favoritesError" class="error-container">
        <text class="error-text">{{ bookshelvesError || favoritesError || '加载失败' }}</text>
        <view class="retry-btn" @click="loadLibraryData">
          <text>重试</text>
        </view>
      </view>

      <!-- 初始加载状态 -->
      <view v-else-if="showLoadingSpinner && isInitialLoad" class="loading-container">
        <view class="loading-spinner"></view>
        <text class="loading-text">加载中...</text>
        <text class="loading-subtitle">请稍候</text>
      </view>

      <!-- 书架内容（后台刷新时不隐藏内容） -->
      <template v-if="!bookshelvesError && !favoritesError && (!showLoadingSpinner || !isInitialLoad)">
        <!-- 空状态 -->
        <view v-if="currentBooks.length === 0" class="empty-library">
          <i class="fas fa-book-open empty-icon" />
          <text class="empty-title">书架空空如也</text>
          <text class="empty-description">
            快去搜索和导入你喜欢的小说吧！
          </text>
          <view class="empty-actions">
            <view class="empty-btn" @click="goToSearch">
              <i class="fas fa-search" />
              <text>去搜索</text>
            </view>
            <view class="empty-btn" @click="goToImport">
              <i class="fas fa-plus" />
              <text>导入小说</text>
            </view>
          </view>
        </view>

        <!-- 书籍列表 -->
        <view v-else class="books-waterfall">
          <view
            v-for="book in currentBooks"
            :key="book.id"
            class="book-item"
            @click="handleNovelClick(book)"
          >
            <image :src="book.novel?.coverImage || '/static/images/default-cover.jpg'" class="book-cover" mode="aspectFill" />
            <view class="book-info">
              <view class="book-header">
                <text class="book-title">{{ book.novel?.title || '未知小说' }}</text>
                <view v-if="book.novel?.status === 0" class="completed-badge">已完结</view>
              </view>
              <text class="book-author">作者：{{ book.novel?.author || '未知' }}</text>
              <text class="book-progress">{{ formatProgressText(book) }}</text>
              <text class="last-read">上次阅读：{{ formatReadTime(book) }}</text>
              <view class="book-actions">
                <view class="progress-bar">
                  <view
                    class="progress-fill"
                    :style="{
                      width: book.readingHistory ? `${(book.readingHistory.chapterId / book.novel.totalChapters) * 100}%` : '0%'
                    }"
                  />
                </view>
                <view class="action-buttons">
                  <view class="action-btn-small continue-btn" @click.stop="continueReading(book)">
                    <i class="fas fa-play" />
                    <text>继续</text>
                  </view>
                  <view class="action-btn-small active">
                    <i class="fas fa-heart" />
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </template>
    </view>

    <!-- 创建书架弹窗 -->
    <view v-if="showCreateBookshelfModal" class="create-bookshelf-modal" @touchmove.prevent @click="cancelCreateBookshelf">
      <view class="modal-content" @click.stop @touchmove.stop>
        <view class="modal-header">
          <text class="modal-title">新建书架</text>
          <view class="close-modal" @click="cancelCreateBookshelf">
            <text class="i-carbon-close" style="font-size: 32rpx; color: var(--text-muted);" />
          </view>
        </view>

        <view class="form-group">
          <text class="form-label">书架名称 *</text>
          <input
            v-model="newBookshelfName"
            type="text"
            class="form-input"
            placeholder="请输入书架名称"
            maxlength="20"
          >
        </view>

        <view class="form-group">
          <text class="form-label">书架描述</text>
          <textarea
            v-model="newBookshelfDescription"
            class="form-textarea"
            placeholder="请输入书架描述（可选）"
            maxlength="100"
          ></textarea>
        </view>

        <view class="modal-actions">
          <view class="cancel-btn" @click="cancelCreateBookshelf">
            <text>取消</text>
          </view>
          <view class="confirm-btn" @click="confirmCreateBookshelf">
            <text>创建</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 底部间距 -->
    <view class="bottom-spacing" />
  </view>
</template>

<style lang="scss" scoped>
.library-page {
  min-height: 100vh;
  background-color: var(--background-dark);
}

// 顶部标题栏样式
.library-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-md);
  background-color: var(--background-medium);
  border-bottom: 2rpx solid var(--border-color);
}

// 书架选择器样式
.bookshelf-selector {
  position: relative;
}

.selector-trigger {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  background-color: var(--background-light);
  border-radius: var(--border-radius);
  cursor: pointer;
  transition: all 0.3s ease;
}

.selector-trigger:active {
  transform: scale(0.98);
}

.bookshelf-name {
  font-size: var(--font-size-md);
  font-weight: 600;
  color: var(--text-primary);
  max-width: 300rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rotate-180 {
  transform: rotate(180deg);
}

// 书架下拉菜单样式
.bookshelf-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 100;
  min-width: 400rpx;
  width: max-content;
  background-color: var(--background-medium);
  border-radius: var(--border-radius);
  box-shadow: 0 8rpx 24rpx var(--shadow-color);
  margin-top: var(--spacing-xs);
  overflow: hidden;
}

.dropdown-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-md);
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.dropdown-item:hover {
  background-color: var(--background-light);
}

.dropdown-text {
  font-size: var(--font-size-md);
  color: var(--text-primary);
  flex: 1;
}

.dropdown-count {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
  margin-right: var(--spacing-md);
}

.dropdown-actions {
  display: flex;
  gap: var(--spacing-xs);
}

.action-btn {
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--spacing-xs);
  cursor: pointer;
  transition: all 0.3s ease;
}

.edit-btn {
  background-color: var(--primary-color);
  color: white;
}

.edit-btn:hover {
  background-color: var(--primary-color-dark);
}

.delete-btn {
  background-color: var(--error-color);
  color: white;
}

.delete-btn:hover {
  background-color: var(--error-color-dark);
}

.dropdown-divider {
  height: 2rpx;
  background-color: var(--border-color);
  margin: var(--spacing-xs) 0;
}

.add-item {
  color: var(--primary-color);
}

.add-item i {
  margin-right: var(--spacing-sm);
}

.header-right {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

.page-content {
  padding: var(--spacing-md);
}

// 加载状态样式
.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  gap: var(--spacing-md);
}

.loading-spinner {
  width: 60rpx;
  height: 60rpx;
  border: 4rpx solid var(--border-color);
  border-top: 4rpx solid var(--primary-color);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.loading-text {
  color: var(--text-secondary);
  font-size: var(--font-size-md);
  font-weight: 600;
}

.loading-subtitle {
  color: var(--text-muted);
  font-size: var(--font-size-sm);
}

// 错误容器
.error-container {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  flex-direction: column;
  gap: var(--spacing-lg);
  padding: var(--spacing-xl);
}

.error-text {
  color: var(--error-color);
  font-size: var(--font-size-md);
  text-align: center;
}

.retry-btn {
  padding: var(--spacing-md) var(--spacing-xl);
  background: var(--primary-color);
  border-radius: var(--border-radius);
  cursor: pointer;
  transition: all 0.3s ease;
}

.retry-btn:active {
  transform: scale(0.95);
}

.retry-btn text {
  color: white;
  font-size: var(--font-size-md);
  font-weight: 600;
}

// 空状态样式
.empty-library {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  padding: var(--spacing-xl);
  text-align: center;
}

.empty-icon {
  font-size: 128rpx;
  color: var(--text-muted);
  margin-bottom: var(--spacing-lg);
  opacity: 0.5;
}

.empty-title {
  font-size: var(--font-size-lg);
  color: var(--text-secondary);
  margin-bottom: var(--spacing-sm);
}

.empty-description {
  font-size: var(--font-size-md);
  color: var(--text-muted);
  line-height: 1.5;
  margin-bottom: var(--spacing-lg);
}

.empty-actions {
  display: flex;
  gap: var(--spacing-md);
}

.empty-btn {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-md) var(--spacing-lg);
  background-color: var(--primary-color);
  color: white;
  border-radius: var(--border-radius);
  font-size: var(--font-size-md);
  cursor: pointer;
  transition: all 0.3s ease;
}

.empty-btn:active {
  transform: scale(0.95);
}

// 书籍列表样式
.books-waterfall {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.book-item {
  display: flex;
  gap: var(--spacing-md);
  padding: var(--spacing-md);
  background-color: var(--background-medium);
  border-radius: var(--border-radius);
  cursor: pointer;
  transition: all 0.3s ease;
}

.book-item:active {
  transform: translateY(-4rpx);
  box-shadow: 0 8rpx 24rpx var(--shadow-color);
}

.book-cover {
  width: 120rpx;
  height: 160rpx;
  border-radius: var(--border-radius-sm);
  flex-shrink: 0;
  object-fit: cover;
}

.book-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.book-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--spacing-xs);
}

.book-title {
  font-size: var(--font-size-md);
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.3;
  flex: 1;
  margin-right: var(--spacing-sm);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.completed-badge {
  padding: 4rpx 8rpx;
  background-color: var(--success-color);
  color: white;
  border-radius: 4rpx;
  font-size: var(--font-size-xs);
  flex-shrink: 0;
}

.book-author {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  margin-bottom: var(--spacing-xs);
}

.book-progress {
  font-size: var(--font-size-sm);
  color: var(--primary-color);
  margin-bottom: var(--spacing-xs);
}

.last-read {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  margin-bottom: var(--spacing-sm);
}

.book-actions {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.progress-bar {
  width: 100%;
  height: 6rpx;
  background-color: var(--border-color);
  border-radius: 3rpx;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background-color: var(--primary-color);
  transition: width 0.3s ease;
}

.action-buttons {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.action-btn-small {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-xs) var(--spacing-sm);
  background-color: var(--background-light);
  border-radius: var(--spacing-xs);
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.3s ease;
}

.action-btn-small:active {
  transform: scale(0.9);
}

.continue-btn {
  background-color: var(--primary-color);
  color: white;
}

.action-btn-small.active {
  color: var(--primary-color);
}

// 底部间距
.bottom-spacing {
  height: 120rpx;
}

// 创建书架弹窗
.create-bookshelf-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999; /* 提高z-index确保在最顶层 */
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-md);
}

.create-bookshelf-modal::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
}

.modal-content {
  width: 100%;
  max-width: 600rpx;
  background: var(--background-dark);
  border-radius: var(--border-radius-lg);
  padding: var(--spacing-lg);
  max-height: 80vh;
  overflow-y: auto;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--spacing-lg);
  padding-bottom: var(--spacing-md);
  border-bottom: 2rpx solid var(--border-color);
}

.modal-title {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--text-primary);
}

.close-modal {
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 50%;
  transition: all 0.3s ease;
}

.close-modal:active {
  background: var(--background-medium);
}

.form-group {
  margin-bottom: var(--spacing-lg);
}

.form-label {
  display: block;
  font-size: var(--font-size-md);
  color: var(--text-primary);
  font-weight: 600;
  margin-bottom: var(--spacing-sm);
}

.form-input {
  width: 100%;
  height: 80rpx;
  padding: 0 var(--spacing-md);
  background: var(--background-medium);
  border: 2rpx solid var(--border-color);
  border-radius: var(--border-radius);
  font-size: var(--font-size-md);
  color: var(--text-primary);
  transition: all var(--transition-normal);
  pointer-events: auto;
  -webkit-user-select: auto;
  user-select: auto;
  box-sizing: border-box;
  line-height: 1.4;
}

.form-input:focus {
  border-color: var(--primary-color);
  background: var(--background-light);
}

.form-input::placeholder {
  color: var(--text-muted);
}

.form-textarea {
  width: 100%;
  min-height: 120rpx;
  padding: var(--spacing-md);
  background: var(--background-medium);
  border: 2rpx solid var(--border-color);
  border-radius: var(--border-radius);
  font-size: var(--font-size-md);
  color: var(--text-primary);
  line-height: 1.6;
  resize: none;
  transition: all var(--transition-normal);
  box-sizing: border-box;
}

.form-textarea:focus {
  border-color: var(--primary-color);
  background: var(--background-light);
}

.form-textarea::placeholder {
  color: var(--text-muted);
}

.modal-actions {
  display: flex;
  gap: var(--spacing-md);
}

.cancel-btn,
.confirm-btn {
  flex: 1;
  padding: var(--spacing-md);
  border-radius: var(--border-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-md);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.cancel-btn {
  background: var(--background-medium);
  color: var(--text-secondary);
}

.confirm-btn {
  background: var(--gradient-primary);
  color: white;
}

.cancel-btn:active,
.confirm-btn:active {
  transform: scale(0.95);
}
</style>